import { Button } from 'antd'
import { useRef } from 'react'
import SignatureCanvas from 'react-signature-canvas'

import AekModal, { PromiseThen } from '@/components/AekModal'
import { message } from '@/utils/antdHelper'

import styles from './index.module.less'

const SignModal = () => {
  const signatureCanvasRef = useRef(null)

  const onOk = async () => {
    const canvas = signatureCanvasRef.current
    if (canvas.isEmpty()) {
      message.warning('请签名')
      return Promise.reject()
    }
    const pngImageData = canvas.toDataURL('image/png')
    return pngImageData
  }

  const clearSignature = () => {
    signatureCanvasRef.current.clear()
  }

  return (
    <AekModal title='签名面板' onOk={onOk} width={1000}>
      <SignatureCanvas
        canvasProps={{ width: 950, height: 300, className: styles.signatureCanvas }}
        ref={signatureCanvasRef}
      />
      <div className='flex justify-end'>
        <Button type='primary' ghost onClick={clearSignature}>
          清除
        </Button>
      </div>
    </AekModal>
  )
}

SignModal.PromiseThen = PromiseThen

export default SignModal
